<div class="wrapper wrapper-content" ng-controller="CostCenterMasterController" >
	<div class="row">
		<div class="col-lg-12">
			<div class="tabs-container">

				<uib-tabset>
					<uib-tab heading="{{'SETTING.COSTCENTER' | translate}}">
						<div class="panel-body" ng-controller="CostCenterController">
							<a ng-click="addCostCenter()" class="btn btn-primary btn-rounded btn-outline" href="">
								<i class="fa fa-plus-circle"></i> {{'SETTING.ADD_COSTCENTER' | translate}}</a>
							<table class="footable table table-bordered table-hover" data-sort="true" data-page-size="15">
								<thead>
									<tr>
										<th class="text-center" data-type="numeric">{{'SETTING.ID' | translate}}</th>
										<th class="text-center">{{'SETTING.NAME' | translate}}</th>
										<th class="text-center">{{'COSTCENTER.EXTERNAL_ID' | translate}}</th>
										<th class="text-center">{{'SETTING.ACTION' | translate}}</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="costcenter in costcenters">
										<td class="text-center">{{ costcenter.id }}</td>
										<td class="text-center">{{ costcenter.name }}</td>
										<td class="text-center">{{ costcenter.external_id }}</td>
										<td class="text-center">
											<a class="btn btn-primary btn-rounded btn-xs" ng-click="editCostCenter(costcenter)" >{{'SETTING.EDIT' | translate}}</a>
											<a ng-click="deleteCostCenter(costcenter)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>

										</td>
									</tr>
								</tbody>
								<tfoot class="hide-if-no-paging">
									<tr>
										<td colspan="6">
											<ul class="pagination pull-right"></ul>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</uib-tab>
					<uib-tab heading="{{'SETTING.BIND_TARIFF' | translate}}">
						<div class="panel-body" ng-controller="CostCenterTariffController">
							<div class="row">
								<div class="col-lg-3">
									<div class="panel panel-info">
										<div class="panel-heading">
											{{'SETTING.SELECT_COSTCENTER' | translate}}
										</div>
										<div class="panel-body">
											<div ng-repeat="costcenter in costcenters" class="radio radio-info">
												<input type="radio" name="radiocostcenter" id="radiocostcenter{{costcenter.id}}" ng-value="costcenter" ng-model="$parent.currentCostCenter" ng-change="changeCostCenter()" >
												<label for="radiocostcenter{{costcenter.id}}">
													{{costcenter.name}}
												</label>
											</div>
										</div>

									</div>

								</div>
								<div class="col-lg-4">
									<div class="panel panel-primary">
										<div class="panel-heading">
											{{currentCostCenter.name}}{{'SETTING.N_S_TARIFF' | translate}}
										</div>
										<div class="panel-body maxheight"
											x-hjc-drop-target="true"
											x-on-drop="pairTariff(dragEl,dropEl)"
											uib-tooltip="{{'SETTING.DRAG_TO_UNBIND' | translate}}">

											<div class="btn btn-primary btn-rounded btn-block"
												ng-repeat="costcentertariff in costcentertariffs"
												x-hjc-draggable="true"> {{costcentertariff.name}}
											</div>

										</div>
									</div>
									<div class="panel panel-danger">
										<div class="panel-heading">
											{{'SETTING.TRASH' | translate}}
										</div>
										<div class="panel-body trash" >
											<img class="trashcan"
											src="img/trashcan.png"
											x-hjc-drop-target="true"
											x-on-drop="deleteTariffPair(dragEl,dropEl)">
										</div>
									</div>
								</div>

								<div class="col-lg-4">
									<div class="panel panel-info">
										<div class="panel-heading">
											{{'SETTING.TARIFF_LIST' | translate}}
										</div>
										<div class="panel-body" uib-tooltip="{{'SETTING.DRAG_TO_BIND' | translate}}"
											slim-scroll box-height="765px">
											<div class="source btn btn-info btn-rounded btn-block"
												ng-repeat="tariff in tariffs"
												x-hjc-draggable="true"> {{tariff.name}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</uib-tab>

					<uib-tab heading="{{'SETTING.COST_FILE' | translate}}">
						<div class="panel-body" ng-controller="CostFileController">
							<div id="dropzone1" class="dropzone" options="dzOptions" callbacks="dzCallbacks" ng-dropzone></div>
							<table class="footable table table-bordered table-hover" data-sort="true" data-page-size="15">
								<thead>
									<tr>
										<th class="text-center" data-type="numeric">{{'SETTING.ID' | translate}}</th>
										<th class="text-center">{{'SETTING.NAME' | translate}}</th>
										<th class="text-center">{{'SETTING.STATUS' | translate}}</th>
										<th class="text-center">{{'SETTING.UPLOAD_TIME' | translate}}</th>
										<th class="text-center">{{'SETTING.ACTION' | translate}}</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="costfile in costfiles">
										<td class="text-center">{{ costfile.id }}</td>
										<td class="text-center"><a ng-href="./upload/{{costfile.uuid}}"
												download="{{costfile.file_name}}">{{ costfile.file_name }}</a>
										</td>
										<td class="text-center">{{ costfile.status }}</td>
										<td class="text-center">{{ costfile.upload_datetime}}</td>
										<td class="text-center">
											<a ng-click="restoreCostFile(costfile)"
												class="btn btn-danger btn-rounded btn-xs">{{'SETTING.RESTORE' | translate}}</a>
											<a ng-click="deleteCostFile(costfile)"
												class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>
										</td>
									</tr>
								</tbody>
								<tfoot class="hide-if-no-paging">
									<tr>
										<td colspan="6">
											<ul class="pagination pull-right"></ul>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</uib-tab>
				</uib-tabset>
			</div>
		</div>
	</div>
</div>
